<template>
  <max-dialog-box :title="titleMax" @closeMaxDialogBox="closeMaxDialogBox">
    <div class="content" :style="{paddingTop: showUploadBtn ? '0px' : '0.1rem'}">
      <div class="uploadBtn" v-if="showUploadBtn">
        <div class="localUpload">
          <span class="upload" @click="localUpload">本地上传</span>
        </div>
        <span class="upload" @click="upload">上传</span>
      </div>
      <el-table
        :data="cfFileList"
        style="width: 100%"
        :height="cfFileList.length ? '6.45rem' : '0.59rem'"
        empty-text=""
      >
        <el-table-column prop="file_name" label="文档名称" min-width="32%">
          <template slot-scope="scope">
            <img class="fileimg" :src="scope.row.file_name | imgSrc" alt/>
            <span class="fileName" :title="scope.row.file_name">{{
                scope.row.file_name
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fileUploader" label="上传人" min-width="18%">
          <template slot-scope="scope">
            <span>{{
                $store.state.chatInformation.userList[scope.row.fileUploader]
                  .user_name
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="file_size_str" label="文件大小" min-width="25%">
        </el-table-column>
        <el-table-column label="操作" min-width="25%">
          <template slot-scope="scope">
            <span
              class="filebtn download"
              @click="handleDownload(scope.row.file_id, scope.row.file_name)"
            >下载</span
            >
            <span v-if="showUploadBtn">
              <span
                class="filebtn download"
                @click="handleCollect(scope.row.file_id)"
                v-if="!tools.isSelf(scope.row.fileUploader) && myFileList.every(item => item.file_id !== scope.row.file_id)"
              >收藏</span
              >
               <span class="filebtn download" v-if="!tools.isSelf(scope.row.fileUploader) && myFileList.some(item => item.file_id === scope.row.file_id)">已收藏</span>
            </span>
            <span class="filebtn delete" v-if="tools.isSelf(scope.row.fileUploader) || (cf_id && tools.conference.isHost(tools.getUserId()))" @click="handleDelete(scope.row)"
            >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="empty" v-if="!cfFileList.length">
        <img :src="require('@/assets/common/empty.png')" alt=""/>
        <p class="imgdesc">暂无文档</p>
      </div>
      <div class="secondDialog">
        <!-- 上传  我的文档 -->
        <mid-dialog-box
          :title="titleMid"
          v-if="showUpload"
          @closeMidDialog="closeUpload"
        >
          <div class="uploadtable">
            <el-table
              :data="myFileList"
              :height="myFileList.length ? '4.2rem' : '0.6rem'"
              style="width: 100%"
              empty-text=""
            >
              <el-table-column label="选择" min-width="15%">
                <template slot-scope="scope">
                  <el-checkbox
                    :disabled="judgeDisable(scope.row.file_id)"
                    @change="checkUploadFile(scope.row)"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="fileName" label="文档名称" min-width="60%">
                <template slot-scope="scope">
                  <img
                    class="fileimg"
                    :src="scope.row.file_name | imgSrc"
                    alt
                  />
                  <span class="fileName">{{ scope.row.file_name }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="file_size_str"
                label="文件大小"
                min-width="25%"
              >
              </el-table-column>
            </el-table>
            <div class="empty" v-if="!myFileList.length">
              <img :src="require('@/assets/common/empty.png')" alt=""/>
              <p class="imgdesc">暂无文档</p>
            </div>
          </div>
          <div
            class="uploadSelfBtn flex-center"
            v-if="myFileList.length"
            @click="uploadMyfile"
          >
            上传
          </div>
        </mid-dialog-box>
      </div>
      <!-- <upload-state-dialog
        ref="uploadDiaRef"
        @addDataList="addDataList"
        :percent="percent"
      ></upload-state-dialog> -->
       <min-dialog-box v-if="showDeleteBox" :dialogData="deleteData" @confirmBtnEvent="confirmDelete" @cancelBtnEvent="cancelDelete"></min-dialog-box>
    </div>
  </max-dialog-box>
</template>

<script>
export default {
  props: {
    // 会议ID 用来判断当前是否在会议中 或者 历史会议
    cf_id: {
      require: Number
    }
  },
  data () {
    return {
      titleMax: '会议文档',
      titleMid: '上传（我的文档）',
      fileId: '',
      showUpload: false,
      showDeleteBox: false,
      selectedList: [], // 我的文档中已被选择的文件
      deleteData: {},
      myFilePage: 1,
      myFileLimit: 99999
    }
  },
  computed: {
    // 我的文件列表
    myFileList () {
      return this.$store.state.filePage.fileList
    },
    // 会议文件列表
    cfFileList () {
      return this.$store.state.conference.cfFileList
    },
    // 是否显示上传按钮
    showUploadBtn () {
      return this.$route.path !== '/conference/agendaCf/main'
    }
  },
  mounted () {
    // 获取我的文件列表
    this.getMyFileList()
    if (this.cf_id) {
      // 获取当前会议文件列表
      this.getCfFileList()
    }
  },
  methods: {
    // 关闭文档弹框
    closeMaxDialogBox () {
      this.$emit('closeMaxDialogBox')
    },
    // 关闭我的文档
    closeUpload () {
      this.showUpload = false
    },
    // 本地上传文件
    async localUpload () {
      const res = await this.tools.createInputFile(true)
      if (res && res.data && res.data.code === 200) {
        if (res.data.data.length) {
          res.data.data.forEach(item => {
            item.add_time = item.file_time
            item.fileUploader = item.file_uploader
            if (this.cf_id) {
              this.$store.dispatch('conference/addCfFile', {
                addTime: item.add_time,
                cfId: this.cf_id,
                fileId: item.file_id,
                user_id: item.fileUploader
              }).then(res => {
                if (res.data && res.data.code === 200) {
                  this.$store.commit('conference/set_cfFileList', {
                    list: [item],
                    type: 'add'
                  })
                }
              })
            } else {
              this.$store.commit('conference/set_cfFileList', {
                list: [item],
                type: 'add'
              })
            }
          })
        }
      }
      // if (this.uploadFile.length) {
      //   this.uploadFile.forEach(item => {
      //     this.$store.dispatch('filePage/addFiles', item.file_id)
      //   })
      // }
    },
    // 下载文档
    async handleDownload (fileID, fileName) {
      this.$store.dispatch('file/downloadFile', {
        fileType: 2,
        fileID,
        other: this.cf_id
      }).then(res => {
        this.tools.download(res, fileName)
      })
    },
    // 删除会议文档
    async handleDelete (item) {
      this.showDeleteBox = true
      // 关联被删除文件ID
      this.deleteId = item.file_id
      this.deleteData = {
        mainTips: [`您确定删除文档 "${item.file_name}" 吗？`],
        btnList: [
          {
            name: '确定',
            color: 'blue',
            type: 'confirm'
          },
          {
            name: '取消',
            color: 'white',
            type: 'cancel'
          }
        ]
      }
    },
    // 确认删除会议文档
    async confirmDelete () {
      if (this.cf_id) {
        this.$store.dispatch('conference/deleteCfFile', {
          cfID: this.cf_id,
          fileID: this.deleteId
        }).then(res => {
          if (res.data && res.data.code === 200) {
            this.$store.commit('conference/set_cfFileList', {
              list: [this.deleteId],
              type: 'delete'
            })
            this.deleteId = null
            this.deleteData = {}
            this.showDeleteBox = false
          }
        })
      }
    },
    // 取消删除会议文档
    cancelDelete () {
      this.showDeleteBox = false
    },
    // 收藏
    handleCollect (fileId) {
      this.$store.dispatch('filePage/addFiles', fileId).then(res => {
        if (res.data && res.data.code === 200) {
          this.getMyFileList()
        }
      })
    },
    // 获取文件列表 我的文档
    getMyFileList () {
      this.$store.dispatch('filePage/getFileList', this.myFileLimit)
    },
    // 获取当前会议文件列表
    getCfFileList () {
      this.$store.dispatch('conference/getCfFileList', this.cf_id)
    },
    // 文件加入列表
    addDataList () {

    },
    // 获取文件后缀
    matchType (fileName) {
      const suffix = fileName.substring(
        fileName.lastIndexOf('.') + 1,
        fileName.length
      )
      const filesuffix = suffix.toLowerCase()
      if (filesuffix) {
        return filesuffix
      }
    },

    // 以下上传框(我的文档) 选择
    checkUploadFile (item) {
      item.fileUploader = this.tools.getUserId()
      this.selectedList.unshift(item)
    },
    // 打开我的文档的上传选择
    upload () {
      this.showUpload = true
    },
    // 点击线上文档的上传
    uploadMyfile () {
      // this.$store.commit('conference/set_cfFileList', { list: this.selectedList })
      this.selectedList.forEach(item => {
        if (this.cfFileList.every(it => it.file_id !== item.file_id)) {
          if (this.cf_id) {
            this.$store.dispatch('conference/addCfFile', {
              addTime: item.add_time,
              cfId: this.cf_id,
              fileId: item.file_id,
              user_id: item.fileUploader
            }).then(res => {
              if (res.data && res.data.code === 200) {
                this.$store.commit('conference/set_cfFileList', {
                  list: [item],
                  type: 'add'
                })
              }
            })
          } else {
            this.$store.commit('conference/set_cfFileList', {
              list: [item],
              type: 'add'
            })
          }
        }
      })
      this.showUpload = false
    },
    // 我的文档是否禁用选中
    judgeDisable (fileId) {
      return this.cfFileList.some(item => item.file_id === fileId)
    }
  },
  components: {}
}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  height: calc(100% - 40px);
  padding: 0 30px;

  .uploadBtn {
    padding-top: 24px;
    overflow: hidden;

    .localUpload {
      float: right;
    }

    .upload {
      cursor: pointer;
      margin-left: 12px;
      float: right;
      width: 96px;
      text-align: center;
      height: 36px;
      background: linear-gradient(316deg, #4a53ef 0%, #6971fe 100%);
      border-radius: 2px;
      line-height: 36px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
  }

  ::v-deep .el-table {
    th .cell {
      line-height: 35px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #273553;
    }

    .cell {
      line-height: 40px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 500;
      color: #3f4f71;
      white-space: nowrap;
    }

    .filebtn {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      text-decoration: underline;
      cursor: pointer;
      margin-right: 20px;
    }

    .download {
      color: #304eec;
    }

    .delete {
      color: #ff2929;
    }

    .fileimg {
      height: 30px;
      vertical-align: middle;
    }

    .fileName {
      padding-left: 12px;
      vertical-align: middle;
    }
  }

  .empty {
    position: relative;
    top: 120px;
    text-align: center;

    img {
      height: 160px;
      margin-bottom: 16px;
    }

    .imgdesc {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      text-align: center;
      color: #5f7196;
      line-height: 20px;
    }
  }

  .uploadtable {
    position: relative;
    padding: 18px 24px 0;

    ::v-deep .el-checkbox__inner {
      height: 16px;
      width: 16px;
    }

    ::v-deep .el-checkbox__inner::after {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -60%) rotate(45deg) scaleY(1);
    }

    ::v-deep .el-table {
      td {
        padding: 9px 0;
      }
    }
  }

  .uploadSelfBtn {
    width: 148px;
    height: 42px;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    bottom: 30px;
    left: 50%;
    font-size: 16px;
    background: linear-gradient(225deg, #4750ec 0%, #6971fe 100%);
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    transform: translateX(-50%);
  }

  ::v-deep .dialogBox {
    position: absolute;

    .box {
      top: 60px;
    }
  }
}

::v-deep .el-dialog {
  margin-top: 330px !important;
}

.secondDialog ::v-deep .dialogBox {
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
